import { memo } from "react"
import styled from "@emotion/styled"
import { formatCurrency } from "@/utils/format"

// 金额显示的样式组件
const BalanceAmountStyled = styled.div`
    font-family: Gilroy;
    font-weight: 700;
    font-size: 18rem;
    line-height: 24rem;
    letter-spacing: 0%;
    text-align: right;
`

const SignSpan = styled.span`
    font-family: Roboto;
    margin-right: 2rem;
`

// 组件属性定义
type ComponentProps = {
    amount?: string // 金额数值
    isColorFulled?: boolean // 是否启用颜色区分（可选）
    className?: string // 类名
    isAllWithPositive?: boolean // 是否一直是正数（可选）
}

// 金额显示组件
const Component: React.FC<React.PropsWithChildren<ComponentProps>> = (props) => {
    const { amount, isColorFulled, className, isAllWithPositive } = props
    const floatAmount = parseFloat(amount || "0")

    // 根据金额正负确定颜色
    const textColor = isColorFulled && floatAmount > 0 ? "#ff9500" : "#131416"

    return (
        <BalanceAmountStyled
            className={className}
            style={{ color: textColor }}
        >
            {/* 显示正号（负号由数字本身提供） */}
            {isAllWithPositive ? "" : <SignSpan>{floatAmount > 0 ? "+" : ""}</SignSpan>}
            {/* 格式化并显示金额 */}
            <span>{formatCurrency(floatAmount)}</span>
        </BalanceAmountStyled>
    )
}

export default memo(Component)
